<template>
<div>
  <div class="hd">
    <span @click="$router.go(-1)"> 返回 </span>
      身份证照片
  </div>
   <div class="idupload">
       <div style="font-size: 12px;line-height: 50px;color:#999">拍摄/上传身份证照片</div>
       <div class="upbox" :class="{undo:isuploada,ua:isuploada}"  :style="uastyle"  @click="prA">
         <template v-if="!$store.state.wxuser.id_photo_a">
           <div class="closeit" @click.stop="del(0)" v-show="!isuploada"></div>
         </template>
       </div>
       <div class="upbox" :class="{undo:isuploadb,ub:isuploadb}" :style="ubstyle" @click="prB">
         <template v-if="!$store.state.wxuser.id_photo_b">
         <div class="closeit"  @click.stop="del(1)" v-show="!isuploadb"></div>
         </template>
       </div>
     <!--  <div class="upbox" :class="{undo:isuploada,ua:isuploada}" @click="cimg(0)"></div>
       <div class="upbox" :class="{undo:isuploadb,ub:isuploadb}" @click="cimg(1)"></div>-->
       <div style="display: none">
         <croppa v-model="upa" :quality="2"  @file-choose="uploadita"></croppa>
         <croppa v-model="upb"  :quality="2"  @file-choose="uploaditb"></croppa>
       </div>
     <md-button @click="doupload" v-if="!$store.state.wxuser.id_photo_a && !$store.state.wxuser.id_photo_b">提交</md-button>
   </div>
</div>
</template>

<script>
import { Toast } from 'mand-mobile'
export default {
  name: 'Idphoto',
  data () {
    return {
      isuploada: true,
      isuploadb: true,
      upa: {},
      upb: {},
      imga: '',
      imgb: '',
      uastyle: {},
      ubstyle: {}
    }
  },
  mounted: async function () {
    if (this.$store.state.wxuser.id_photo_a) {
      this.uastyle = {
        backgroundImage: `url(` + this.$store.state.wxuser.id_photo_a + ')',
        backgroundSize: 'cover'
      }

      this.isuploada = false
    }
    if (this.$store.state.wxuser.id_photo_b) {
      this.ubstyle = {
        backgroundImage: `url(` + this.$store.state.wxuser.id_photo_b + ')',
        backgroundSize: 'cover'
      }
      this.isuploadb = false
    }
  },
  methods: {
    uploadita: async function (file) {
      let formData = new FormData()
      formData.append('file', file)
      if (file) {
        Toast.loading('上传中请等待')
        let res = await this.$api.post('/uploadPhoto', formData, {
          headers: {'Content-Type': 'multipart/form-data'}
        })
        if (res.data.url) {
          this.imga = res.data.url
          document.querySelector('.ua').style.background = `url(` + res.data.url + ')';
          document.querySelector('.ua').style.backgroundPosition = `center center`
          document.querySelector('.ua').style.backgroundSize = `cover`;
          this.isuploada = false
          Toast.succeed('上传成功')
        } else {
          Toast.failed('上传失败请重新上传')
        }
      }
    },
    uploaditb: async function (file) {
      let formData = new FormData()
      formData.append('file', file)
      if (file) {
        Toast.loading('上传中请等待')
        let res = await this.$api.post('/uploadPhoto', formData, {
          headers: {'Content-Type': 'multipart/form-data'}
        })
        if (res.data.url) {
          this.imgb = res.data.url
          document.querySelector('.ub').style.background = `url(` + res.data.url + ')'
          document.querySelector('.ub').style.backgroundPosition = `center center`
          document.querySelector('.ub').style.backgroundSize = `cover`
          this.isuploadb = false
          Toast.succeed('上传成功')
        } else {
          Toast.failed('上传失败请重新上传')
        }
      }
    },
    del (index) {
      if (index == 0) {
        this.imga = ''
        this.isuploada = true
        this.uastyle = {
          background: ''
        }
      } else {
        this.imgb = ''
        this.isuploadb = true
        this.ubstyle = {
          background: ''
        }
      }
    },
    doupload: async function () {
      if (!this.imga) {
        Toast.info('请提交身份证正面')
        return false
      }
      if (!this.imgb) {
        Toast.info('请提交身份证反面')
        return false
      }
      let _res = await this.$api.post('/updateUser', {
        id_photo_a: this.imga,
        id_photo_b: this.imgb,
        uid: this.$store.state.wxuser.uid ? this.$store.state.wxuser.uid : 1
      })
      if (_res.data.state) {
        this.updateUser()
        Toast.succeed('提交成功')
      } else {
        Toast.failed('提交失败')
      }
    },
    updateUser: async function () {
      let _u = await this.$api.post('/getUser', this.$store.state.wxuser)
      if (_u.data.state) {
        // this.$store.commit('updateUser', _u.data.data)
        this.$store.dispatch('getUser')
      } else {
        // Toast.failed('获取用户失败')
      }
      this.$router.go(-1)
    },
    cimg (p) {
      let that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var localIds = res.localIds // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          if (p === 0) {
            that.uploadita(localIds[0])
          }
          if (p === 1) {
            that.uploaditb(localIds[0])
          }
        }
      })
    },
    prA () {
      if (this.isuploada) {
        this.upa.chooseFile()
      }
    },
    prB () {
      if (this.isuploadb) {
        this.upb.chooseFile()
      }
    }
  }
}
</script>

<style scoped>
.idupload{
  text-align: center;

}
  .upbox{
    width: 60vw;
    height: 40vw;
    border: 1px dashed #999;
    margin:0 auto 40px;
    position:relative;
    border-radius: 10px;
    background-size: cover;

  }
  .ub{
    background-size: cover;
  }
  .ua{
    background-size: cover;
  }
  .undo:after{
    content: '\e601';
    width: 18vw;
    height: 18vw;
    display: block;
    border-radius: 50%;
    background: #6a78d0;
    position: absolute;
    font-family: 'iconfont';
    top:45%;
    left:50%;
    line-height: 18vw;
    text-align: center;
    transform: translate(-50%,-50%);
    font-size: 8vw;
    color:#fff;
  }
  .ua:before{
    content: '上传人像面';
    font-size: 12px;
    position: relative;
    top: 30vw;
  }
  .ub:before{
    content: '上传国徽面';
    font-size: 12px;
    position: relative;
    top: 30vw;
  }

  .ua{
    background-size: cover;
  }
  .closeit{
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 50%;
    border:1px solid #444;
    line-height: 20px;
    text-align:center;
    color:#444;
    right:-9px;
    top:-9px;
    background: #f9f9f9;
    opacity: .8;
  }
  .closeit:after{
    content:'X';
  }
</style>
